<template>
  <view class="worker">
    <view class="box">
      <!-- #ifdef MP -->
      <div class="w100 " style="height: 75px;background: #ebaaae"></div>
      <!-- #endif -->
      <div class="title-1">选择你需要的邻工类型</div>
      <div v-for="(item, index) in list" :key="index" :style="item.style" class="dai_qu_wai_mai">
        <div class="fac">
          <img class="left" :src="item.leftLogo" alt="" />
          <div>
            <div class="title-2">{{ item.title }}</div>
            <div class="title-3">{{ item.desc }}</div>
          </div>
        </div>
        <div @click="ljfbTap(item)" class="tz fac" :style="item.style1">
          <div class="ljfb">立即发布</div>
          <uv-icon name="arrow-right" color="#fff" size=""></uv-icon>
        </div>
        <img class="right" :src="item.rightLogo" alt="" />
      </div>
    </view>
    <custom-tab-bar />
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import CustomTabBar from '@/custom-tab-bar/index.vue'
import { storeToRefs } from "pinia"
import { useUserStore } from '@/store'
import {
  onReady,
  onShow,

} from '@dcloudio/uni-app'

const list = reactive([
  {
    id: 1,
    style:
      "background: linear-gradient(to left, #D3CBFD, #CBD6FF, #EDEFFE);",
    style1: "background: linear-gradient(to right, #4856F5,  #A1A9F9);",
    url: "/pages-worker/takeout?type=1",
    leftLogo: "https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0812/36e54202508121150503282.png",
    rightLogo: "https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0812/4d22f202508121151165269.png",
    title: "代取外卖",
    desc: "解放双手，美味片刻达",
  },
  {
    id: 2,
    style:
      "background: linear-gradient(to left, #FEC5D4, #FEC5D4, #ffecf2);",
    style1: "background: linear-gradient(to right, #FF595D , #FFA19B);",
    class: "",
    url: "/pages-worker/takeout?type=2",
    leftLogo: "https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0812/f771d20250812115200651.png",
    rightLogo: "https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0812/88b25202508121152196081.png",
    title: "取快递",
    desc: "省心省力，物品到家",
  },

  {
    id: 3,
    style:
      "background: linear-gradient(to left, #C6F5FA, #D8F1F0, #e1f9fc);",
    style1: "background: linear-gradient(to right, #62A495, #9AC9C0);",
    url: "/pages-worker/takeout?type=3",
    leftLogo: "https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0812/45d84202508121152457262.png",
    rightLogo: "https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0812/bb49a202508121153017840.png",
    title: "代买商品",
    desc: "足不出户享便利",
  },

  {
    id: 4,
    style:
      "background: linear-gradient(to left, #F6D58F, #FCEFDE, #fdf3de);",
    style1: "background: linear-gradient(to left, #EE9300, #FBD190);",
    url: "/pages-worker/pet?type=4",
    leftLogo: "https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0812/fe070202508121153373255.png",
    rightLogo: "https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0812/25f98202508121153536142.png",
    title: "宠物帮喂",
    desc: "安心托付，宠物照护",
  },
  {
    id: 5,
    style:
      "background: linear-gradient(to left, #A9CAFB, #C8DFFC, #dfecff);",
    style1: "background: linear-gradient(to left,#548DEE, #9CC6F3);",
    url: "/pages-worker/pet?type=5",
    leftLogo: "https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0812/5cc3020250812115421351.png",
    rightLogo: "https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0812/721e9202508121154339230.png",
    title: "宠物帮遛",
    desc: "解放时间，活力遛宠",
  },
])
const user = useUserStore()
const { userInfo } = storeToRefs(user)
onShow(() => {
  uni.removeStorage({ key: 'dzb' });
  uni.removeStorage({ key: 'typeForm' });
})
onReady(() => {
  uni.removeStorage({ key: 'dzb' });
  uni.removeStorage({ key: 'typeForm' });
})
const ljfbTap = (item) => {
  let { token } = storeToRefs(useUserStore())
  if (!token.value) return uni.navigateTo({ url: uni.$config.loginPage + '?redirect=' + encodeURIComponent(item.url) })
  uni.removeStorage({ key: 'dzb' });
  uni.removeStorage({ key: 'typeForm' });
  if (item.id === 1 || item.id === 2 || item.id === 3) {
    uni.navigateTo({ url: item.url });
  } else {
    uni.navigateTo({
      url: item.url,
    });
  }
}
</script>



<style>
page {
  background: linear-gradient(to bottom, #ebaaae 0%, #ffffff 15%);
  padding-bottom: 150rpx;
}

.worker .uvicon.uvicon-arrow-right {
  font-size: 26rpx !important;
  margin-top: 3rpx !important;
  margin-left: 3rpx !important;
}
</style>

<style lang="scss" scoped>
.worker {
  min-height: 50vh;
  padding-left: 30rpx;
  padding-right: 30rpx;
  padding-top: calc(var(--status-bar-height) + 50rpx);

  .left {
    width: 150rpx;
    height: 150rpx;
    margin-left: 20rpx;
    margin-right: 30rpx;
  }

  .title-1 {
    font-weight: bold;
    font-size: 44rpx;
    color: #333333;
    padding-bottom: 30rpx;
  }

  .title-2 {
    font-weight: bold;
    font-size: 38rpx;
    color: #333333;
    padding-top: 25rpx;
    padding-bottom: 5rpx;
  }

  .title-3 {
    font-weight: 400;
    font-size: 26rpx;
    color: #727171;
  }

  .tz {
    cursor: pointer;
    position: relative;
    min-width: 150rpx;
    z-index: 2;
    border-radius: 50rpx;
    padding: 15rpx 10rpx 15rpx 20rpx;
    overflow: hidden;
    justify-content: center;
    margin-right: 30rpx;
  }

  .right {
    width: 213rpx;
    height: 170rpx;
    position: absolute;
    right: 30rpx;
    top: 50%;
    transform: translate(0, -50%);
    z-index: 1;
  }

  .dai_qu_wai_mai {
    height: 200rpx;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .ljfb {
    font-weight: 400;
    font-size: 28rpx;
    color: #ffffff;
    line-height: 1;
  }
}

.title {
  padding: 30rpx;
  font-size: 36rpx;
  font-weight: bold;
}
</style>